<template>
    <Homeheader></Homeheader>
    <div id="app">
        <!-- tab切换 -->
        <div id="tab">
            <a-button shape="circle" size="big" :icon="h(ArrowLeftOutlined)" @click="router.push('/more')" />
            <span style="display: inline-block;font-size: 2.5vw;font-weight: bold;margin-left: 2vw;">{{ infoTag
                }}</span>
        </div>
        <div id="content">
            <!-- 左侧 -->
            <div id="tagBox">
                <div id="tagBtn" :class="{ 'tagBtn': infoTag == '店铺信息' }" @click="infoTag = '店铺信息'">
                    <div class="iconfont icon-dianpu"></div>
                    <div style="margin-left: 10px;box-sizing: border-box;">店铺信息</div>
                </div>
                <div id="tagBtn" :class="{ 'tagBtn': infoTag == '经营数据' }" @click="infoTag = '经营数据'">
                    <div class="iconfont icon-charts-bar"></div>
                    <div style="margin-left: 10px;box-sizing: border-box;">经营数据</div>
                </div>
                <div id="tagBtn" :class="{ 'tagBtn': infoTag == '客户数据' }" @click="infoTag = '客户数据'">
                    <div class="iconfont icon-customer-group-fill"></div>
                    <div style="margin-left: 10px;box-sizing: border-box;">客户数据</div>
                </div>
            </div>
            <!-- 右侧（根据infoTag进行判断展示） -->
            <div id="tabCon">
                <!-- 当 infoTag=店铺信息 时展示店铺信息 -->
                <div v-show="infoTag == '店铺信息'" id="store1Info">
                    <div id="bigBox">
                        <div id="storeInfo_title">店铺信息</div>
                        <div id="content_box">
                            <div id="imgbox">
                                <img src='https://img.zcool.cn/community/019e1f58ca4b92a801219c7740a3f8.png@1280w_1l_2o_100sh.png'
                                    alt="" style="width: 80%;margin-top:5px;box-sizing: border-box;">
                            </div>
                            <div id="conxbox">
                                <div id="title">店铺名称</div>
                                <div id="content">天西餐厅总店</div>
                            </div>
                            <div id='conxbox'>
                                <div id="title">店长</div>
                                <div id="content">张国龙</div>
                            </div>
                            <div id='conxbox'>
                                <div id="title">经理</div>
                                <div id="content">赵宁</div>
                            </div>
                            <div id="conxbox">
                                <div id="title">电话</div>
                                <div id="content">13188806414</div>
                            </div>
                        </div>
                    </div>
                    <div id="tabBox">
                        <div
                            style="font-size:20px;font-weight: bolder;margin-top: 10px;margin-left: 10px;box-sizing: border-box;">
                            其他店铺</div>
                        <div class="tablebox">
                            <!-- 表格 -->
                            <table>
                                <tr>
                                    <th>店铺名称</th>
                                    <th>店长</th>
                                    <th>经理</th>
                                    <th>电话</th>
                                </tr>

                                <tr v-for="(item, index) in shopData" :key="index">
                                    <td>{{ item.name }}</td>
                                    <td>{{ item.dianzhang }}</td>
                                    <td>{{ item.jingli }}</td>
                                    <td>{{ item.phone }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- 当 infoTag=经营数据 时展示经营数据 -->
                <div v-show="infoTag == '经营数据'" id="businessInfo">
                    <div id="bigBox">
                        <div id="tabBox1">
                            <div style="width: 70%;padding:5%;box-sizing: border-box;">
                                <div style="font-size: 20px;font-weight: bold;">总收入</div>
                                <div style="font-size: 40px;font-weight: bolder;margin-top: 10%;box-sizing: border-box">
                                    ￥8740</div>
                                <div style="color:green;">比昨天增加4.3%</div>
                            </div>
                            <div style="width: 30%;">
                                <div class="iconfont icon-a-066_jinbi" style="font-size: 40px;margin-left: 20px;"></div>
                            </div>
                        </div>
                        <div id="tabBox1">
                            <div style="width: 70%;padding:5%;box-sizing: border-box;">
                                <div style="font-size: 20px;font-weight: bold;">菜品已售出</div>
                                <div style="font-size: 40px;font-weight: bolder;margin-top: 10%;box-sizing: border-box">
                                    26</div>
                                <div style="color:green;">比昨天增加2.2%</div>
                            </div>
                            <div style="width: 30%;">
                                <div class="iconfont icon-a-066_gouwu-34" style="font-size: 40px;margin-left: 20px;">
                                </div>
                            </div>
                        </div>
                        <div id="tabBox1">
                            <div style="width: 70%;padding:5%;box-sizing: border-box;">
                                <div style="font-size: 20px;font-weight: bold;">总订单</div>
                                <div style="font-size: 40px;font-weight: bolder;margin-top: 10%;box-sizing: border-box">
                                    11</div>
                                <div style="color:green;">比昨天增加5.3%</div>
                            </div>
                            <div style="width: 30%;">
                                <div class="iconfont icon-a-066_liulanjilu" style="font-size: 40px;margin-left: 20px;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="listBox">
                        <div style="width: 47%;background: white;border-radius: 10px;">
                            <div style="margin:5%;font-size:20px;font-weight:bold;box-sizing:border-box;">菜品销售</div>
                            <div class="tablebox">
                                <!-- 表格 -->
                                <table>
                                    <tr>
                                        <th>菜肴</th>
                                        <th>总订单</th>
                                    </tr>

                                    <tr v-for="(item, index) in goodSellList" :key="index">
                                        <td>{{ item.name }}</td>
                                        <td>{{ item.num }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div style="width: 47%;background: white;border-radius: 10px;">
                            <div style="margin:5%;font-size:20px;font-weight:bold;box-sizing:border-box;">商品库存</div>
                            <div class="tablebox">
                                <!-- 表格 -->
                                <table>
                                    <tr>
                                        <th>菜肴</th>
                                        <th>入库时间</th>
                                    </tr>

                                    <tr v-for="(item, index) in goodNumList" :key="index">
                                        <td>{{ item.name }}</td>
                                        <td>{{ item.date }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 当 infoTag=客户数据 时展示客户数据 -->
                <div v-show="infoTag == '客户数据'" id="customerInfo">
                    <div id="tabBox">
                        <Add_com v-model="dialogVisible" @sendfater="getchild"></Add_com>
                        <el-button plain @click="dialogVisible = true">
                            添加按钮
                        </el-button>
                        <Add_com></Add_com>
                        <div class="tablebox">
                            <!-- 表格 -->
                            <table>
                                <tr>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>会员等级</th>
                                    <th>注册时间</th>
                                </tr>

                                <tr v-for="(item, index) in customerData" :key="index">
                                    <td>{{ item.username }}</td>
                                    <td>{{ item.sex }}</td>
                                    <td>{{ item.vip }}</td>
                                    <td>{{ item.time }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import Homeheader from '@/views/pages/Homeheader.vue';
import Add_com from '@/components/more/fz_com/Add_com.vue'
import { ref, h, onMounted, reactive } from 'vue'
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router'
import { dayjs } from 'element-plus'
import axios from 'axios'


const size = ref<SizeType>('large');
const dialogVisible = ref(false)
// 接收子组件传递的表单数据
const getchild = async(value) => {
    console.log(value);
    let time = new Date()
    let obj = {username:value.surname+value.name,sex:"未知",vip:value.region,time:time}
    console.log(obj)
    let {data} = await axios.post('http://127.0.0.1:3000/myj/addUser',obj)
    console.log(data)
    if(data.code==200){
        getCustomerData()
    }
}
let route = useRoute()
let router = useRouter()

let infoTag = ref(route.query.type ? route.query.type : "店铺信息")
// 定义其他店铺列表
const shopData = reactive([]);
// 获取其他店铺列表
let getShopData = async () => {
    let { data } = await axios.get("http://127.0.0.1:3000/myj/getOtherShop")
    Object.assign(shopData, data.data)
}
// 定义用户列表
const customerData = reactive([]);
// 获取用户列表
let getCustomerData = async () => {
    let { data } = await axios.get("http://127.0.0.1:3000/myj/getUsers")
    let list = []
    for (let i = 0; i < data.data.length; i++) {
        list.push({ username: data.data[i].username, sex: data.data[i].sex, vip: data.data[i].vip, time: dayjs(data.data[i].time).format('YYYY-MM-DD') })
    }
    Object.assign(customerData, list)
}
// 定义商品销售列表
let goodSellList = reactive([

])
// 定义商品库存列表
let goodNumList = reactive([])
// 获取商品销售列表
let getGoodSellList = async () => {
    let { data } = await axios.get('http://127.0.0.1:3000/myj/getCuisine')
    console.log(data.data)
    let list1 = []
    let list2 = []
    for (let i = 0; i < data.data.length; i++) {
        list1.push({ name: data.data[i].name, num: data.data[i].daySellNum })
        list2.push({ name: data.data[i].name, date: data.data[i].addTime })

    }
    Object.assign(goodSellList, list1)
    Object.assign(goodNumList, list2)

}



onMounted(() => {
    getCustomerData()
    getShopData()
    getGoodSellList()
})

</script>


<style scoped>
#app {
    width: 100vw;
    height: 100vh;
    padding-top: 12vh;
    padding-bottom: 2vh;
    padding-left: 2vh;
    padding-right: 2vh;
    background: #F5F5F5;
    overflow: auto;
    /* 当内容超出容器时显示滚动条 */

    box-sizing: border-box;

    #content {
        width: 100%;

        margin-top: 2vh;
        display: flex;

        #tagBox {
            width: 25%;
            border-radius: 20px;
            background: white;
            padding-top: 20px;
            max-height: 21vh;
            box-sizing: border-box;

            #tagBtn {
                width: 80%;
                height: 50px;
                margin: 0 auto;
                line-height: 50px;
                margin-bottom: 15px;
                display: flex;
                box-sizing: border-box;
                border-radius: 15px;


            }

            .tagBtn {
                background: #F0F8FF;
            }
        }

        #tabCon {
            width: 70%;
            margin-left: 2vw;
            box-sizing: border-box;

            /* background: red; */
            /* 当 infoTag=店铺信息 时展示店铺信息 */
            #store1Info {
                width: 100%;
                height: 180px;

                #bigBox {
                    width: 100%;
                    border-radius: 10px;
                    background: white;
                    margin: 0px auto;
                    padding: 2%;
                    box-sizing: border-box;

                    #storeInfo_title {
                        font-size: 20px;
                        font-weight: bold;
                    }

                    #content_box {
                        display: flex;
                        justify-items: center;
                        margin-top: 10px;
                        box-sizing: border-box;

                        /* text-align: left; */
                        /* width:20%; */
                        #imgbox {
                            width: 15%;
                        }

                        #conxbox {
                            width: 20%;

                            /* display:flex; */
                            /* flex-direction:column; */
                            /* justify-content:left; */
                            #title {
                                font-size: 18px;
                            }

                            #content {
                                font-size: 19px;
                                font-weight: 600;
                                text-align: left !important;
                            }
                        }
                    }
                }

                #tabBox {
                    width: 100%;

                    border-radius: 10px;
                    background: white;
                    margin: 20px auto;
                    padding: 10px;
                    box-sizing: border-box;

                    .tablebox {
                        width: 95%;
                        height: 85%;
                        margin-left: 2%;
                        margin-top: 2%;

                        table {
                            width: 100%;
                        }

                        th {
                            background: #f2f2f2;
                            border-radius: 10px;
                            width: 25%;
                            height: 5%;
                            padding: 20px;
                            font-size: 20px;
                        }

                        /* // 给th添加鼠标悬浮样式 */
                        tr:hover {
                            background: #ddebf5;
                        }

                        td {
                            padding: 19px;
                            text-align: center;
                            border-bottom: 1px solid #ddd;
                            font-size: 20px;
                        }
                    }
                }
            }

            /* <!-- 当 infoTag=经营数据 时展示经营数据 --> */
            #businessInfo {
                width: 100%;

                #bigBox {
                    width: 100%;
                    border-radius: 10px;
                    display: flex;
                    justify-content: space-around;
                    margin: 0px auto;
                    box-sizing: border-box;

                    #tabBox1 {
                        width: 31%;
                        display: flex;
                        background: white;
                        border-radius: 10px;
                    }
                }

                #listBox {
                    width: 100%;
                    border-radius: 10px;
                    display: flex;
                    justify-content: space-around;
                    margin: 20px auto;
                    box-sizing: border-box;

                    .tablebox {
                        width: 95%;
                        height: 85%;
                        margin-left: 2%;
                        margin-top: 2%;

                        table {
                            width: 100%;
                        }

                        th {
                            background: #f2f2f2;
                            border-radius: 10px;
                            width: 25%;
                            height: 5%;
                            padding: 20px;
                            font-size: 20px;
                        }

                        /* // 给th添加鼠标悬浮样式 */
                        tr:hover {
                            background: #ddebf5;
                        }

                        td {
                            padding: 19px;
                            text-align: center;
                            border-bottom: 1px solid #ddd;
                            font-size: 20px;
                        }
                    }
                }

            }

            /* <!-- 当 infoTag=客户数据 时展示客户数据 --> */
            #customerInfo {
                #tabBox {
                    width: 100%;

                    border-radius: 10px;
                    background: white;
                    margin: 0 auto;
                    padding: 10px;
                    box-sizing: border-box;

                    .tablebox {
                        width: 95%;
                        height: 85%;
                        margin-left: 2%;
                        margin-top: 2%;

                        table {
                            width: 100%;
                        }

                        th {
                            background: #f2f2f2;
                            border-radius: 10px;
                            width: 25%;
                            height: 5%;
                            padding: 20px;
                            font-size: 20px;
                        }

                        /* // 给th添加鼠标悬浮样式 */
                        tr:hover {
                            background: #ddebf5;
                        }

                        td {
                            padding: 19px;
                            text-align: center;
                            border-bottom: 1px solid #ddd;
                            font-size: 20px;
                        }
                    }
                }
            }
        }
    }
}
</style>